<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    /* 
    1、通过属性选择器 选择到 带有属性 v-cloak的标签 
       让他隐藏
 */

    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 2、 让带有插值 语法的   添加 v-cloak 属性 
         在 数据渲染完场之后，v-cloak 属性会被自动去除，
         也就是对应的标签会变为可见
    -->
    <div v-cloak>{{msg}}</div>

  </div>

  <!-- <script type="text/javascript" src="js/vue.js"></script> -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue'
      }
    });
  </script>
</body>

</html>